<template>
  <div class="com_EducationalSupport">
    <el-row>
      <el-card :body-style="{ padding: '5px' }">
        <el-col :offset="18" style="margin-bottom: 5px">
          <el-button plain @click="$router.back(-1)">返回</el-button>
          <el-button v-if="action==='view'" size="small" @click="progressListClick" icon="el-icon-search" type="success">查看审批流程</el-button>
        </el-col>
      </el-card>
    </el-row>
    <div style="paddingLeft:20px;paddingRight:20px;">
      <el-row>
        <!--低保-->
        <living-allowances v-if="isLivingAllowances(approvalKey) && applicationData" :view="true" :living-allowances-temp="applicationData"></living-allowances>
        <!--教育救助-->
        <educational-support v-if="applicationData && isEducationalSupport(approvalKey)" :educational-support-temp="applicationData"
          :view="true" :approvalKey="approvalKey" :lastTask="lastTask" @money="getMoney"></educational-support>
      </el-row>
      <!--审核意见-->
      <progress-list v-if="approvalId" :approval-id="approvalId"></progress-list>
      <!--填写审核-->
      <el-row style="marginBottom:50px;" v-if="action==='audit'">
        <el-card>
          <div slot="header" class="clearfix">
            <span class="el-card-header">审核</span>
          </div>
          <el-row>
            <el-col :span="8" :offset="8">
              <el-form ref="auditForm" :rules="rules" :model="temp" label-width="80px">
                <el-form-item label="审核结果" prop="result">
                  <el-radio-group v-model="temp.result">
                    <el-radio label="PASS">同意</el-radio>
                    <el-radio label="REJECT">不同意</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="负责人" prop="principal">
                  <el-input v-model="temp.principal"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="contact">
                  <el-input v-model="temp.contact"></el-input>
                </el-form-item>
                <el-form-item label="审核意见" prop="comment">
                  <el-input type="textarea" v-model="temp.comment"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="20">
              <el-button plain @click="$router.back(-1)">取消</el-button>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
      <!-- 审批流程 -->
      <el-dialog :title="dialogTitle" width="40%" :visible.sync="taskHistoryVisible">
        <task-history :tasks="taskList"></task-history>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitModify">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import TaskHistory from "./components/TaskHistory";
import LivingAllowances from "../components/LivingAllowances";
import EducationalSupport from "../components/EducationalSupport";
import {
  queryLADetail,
  audit,
  queryESDetail,
  auditLast,
  queryTaskHistory
} from "@/api/approval";
import ProgressList from "../components/ProgressList";
import { closeAuditTag } from "@/utils/tools";
import dict from "@/assets/dict";

export default {
  components: {
    LivingAllowances,
    EducationalSupport,
    ProgressList,
    TaskHistory
  },
  props: [],
  data() {
    return {
      tasks: [],
      dialogTitle: "审批流程",
      taskHistoryVisible: false,
      applicationData: null,
      temp: {
        result: null,
        comment: null,
        taskId: null,
        approvalId: null,
        principal: null,
        contact: null
      },
      action: null,
      approvalId: "",
      approvalKey: this.$route.query.approvalKey,
      taskId: "",
      lastTask: false,
      taskList: [],
      edMoney: null,
      rules: {
        result: [{ required: true, message: "请选择结果", trigger: "change" }],
        comment: [{ required: true, message: "请填写意见", trigger: "blur" }],
        principal: [
          { required: true, message: "请输入负责人", trigger: "blur" }
        ],
        contact: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ]
      }
    };
  },
  mounted: function() {
    if (this.$route.query.id) {
      this.approvalId = this.$route.query.id;
      this.getApplicationData(this.$route.query.id);
      this.getTaskList();
    }
    if (this.$route.query.action) {
      this.action = this.$route.query.action;
    }
  },
  methods: {
    getApplicationData(id) {
      if (this.isLivingAllowances(this.approvalKey)) {
        queryLADetail(id).then(res => {
          this.applicationData = res.data;
          this.contentLoading = false;
        });
      } else if (this.isEducationalSupport(this.approvalKey)) {
        queryESDetail(id).then(res => {
          this.applicationData = res.data;
          this.contentLoading = false;
        });
      }
    },
    progressListClick() {
      this.taskHistoryVisible = true;
    },
    submitModify() {
      this.taskHistoryVisible = false;
    },
    getTaskList() {
      queryTaskHistory(this.approvalId).then(res => {
        this.taskList = res.data;
        this.taskList.forEach(e => {
          this.lastTask = e.lastTask;
        });
      });
    },
    onSubmit() {
      if (this.approvalId) {
        this.$refs["auditForm"].validate(valid => {
          if (valid) {
            this.temp.approvalId = this.$route.query.id;
            this.temp.taskId = this.$route.query.taskId;
            const loading = this.$loading({
              lock: true,
              text: "提交中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)"
            });
            setTimeout(() => {
              loading.close();
            }, 2000);
            this.$confirm("提交后将不可撤回, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                //这里做判断，是否是教育救助的最后一个审批
                if (
                  this.isEducationalSupport(this.approvalKey) &&
                  this.lastTask
                ) {
                  if (!this.edMoney) {
                    this.$message.error("请填写救助资金");
                    return;
                  }
                  auditLast(this.temp, this.edMoney).then(() => {
                    this.$notify({
                      title: "成功",
                      message: "提交成功",
                      type: "success",
                      duration: 2000
                    });
                    closeAuditTag(this);
                    this.$router.push({
                      name: "joined",
                      props: () => ({ pageKey: "joined" })
                    });
                  });
                } else {
                  audit(this.temp).then(() => {
                    this.$notify({
                      title: "成功",
                      message: "提交成功",
                      type: "success",
                      duration: 2000
                    });
                    closeAuditTag(this);
                    this.$router.push({
                      name: "joined",
                      props: () => ({ pageKey: "joined" })
                    });
                  });
                }
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消"
                });
              });
          }
        });
      }
    },
    getLastTask(value) {
      this.lastTask = value;
    },
    getMoney(value) {
      this.edMoney = value;
    },
    isEducationalSupport(key) {
      if (dict.esApprovalKey[key]) {
        return true;
      } else {
        return false;
      }
    },
    isLivingAllowances(key) {
      if (dict.laApprovalKey[key]) {
        return true;
      } else {
        return false;
      }
    },
    resetTemp() {
      this.temp = {
        result: null,
        comment: null,
        taskId: null,
        approvalId: null
      };
    }
  }
};
</script>
<style>
.el-card-header {
  font-size: 20px !important;
  color: #3ba4f5 !important;
  padding-left: 20px;
}
</style>